<template>
  <div class="checkList">

    <!-- Container Wrapper -->
    <div id="mws-container" class="clearfix">

      <!-- Main Container -->
      <div class="container">
        <div v-show="false"> {{dataList}}{{qList}}</div>
        <div class="mws-panel grid_8 mws-collapsible" v-for="(list, index) in dataList" v-if="list[0]">
          <div class="mws-panel-header">
            <span class="mws-i-24 i-table-1" v-text="list[0].q_class.q_class" ></span>
            <div class="mws-collapse-button mws-inset"><span class=""></span></div>
          </div>
          <div class="mws-panel-body">
            <!--<table class="mws-table">-->
            <!--<thead>-->
            <!--<tr>-->
            <!--<th>时间</th>-->
            <!--<th>问题描述</th>-->
            <!--<th>紧急程度</th>-->
            <!--<th>状态</th>-->
            <!--<th>修复人</th>-->
            <!--</tr>-->
            <!--</thead>-->
            <!--<tbody>-->
            <!--<tr class="gradeA" v-for="(list,index) in qList">-->
            <!--<td v-text="list.q_timer.substring(0,10)"></td>-->
            <!--<td v-text="list.q_content"></td>-->
            <!--<td v-text="levelDetail[list.q_level]"></td>-->
            <!--<td class="center" v-text="statusDetail[list.q_status]"></td>-->
            <!--<td class="center" v-if="list.a_user == ''">暂无</td>-->
            <!--<td class="center" v-text="list.a_user" v-else></td>-->
            <!--</tr>-->
            <!--</tbody>-->
            <!--</table>-->
            <el-table
              :data="list"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="ID"
                sortable
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="q_timer"
                label="日期"
                sortable
                width="100"
                :filters="timerList"
                :filter-method="filterHandler"
              >
                <!--:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"-->
                <!--:filter-method="filterHandler"-->
              </el-table-column>
              <el-table-column
                prop="q_content"
                label="问题描述">
              </el-table-column>
              <el-table-column
                prop="q_level"
                label="紧急程度"
                width="120"
                sortable
                :filters="levelDetail"
                :filter-method="filterHandler">
              </el-table-column>
              <el-table-column
                prop="q_status"
                label="状态"
                width="120"
                sortable
                :filters="statusDetail"
                :filter-method="filterHandler"
                >
              </el-table-column>
              <el-table-column
                prop="q_checkOut"
                label="测试确认"
                width="120"
                sortable
                :filters="checkDetail"
                :filter-method="checkHandler"
              >
              </el-table-column>
              <el-table-column
                prop="q_backUp"
                label="备注"
              >
              </el-table-column>
              <el-table-column
                prop="a_user"
                label="修复人"
                width="100"
                :filters="userDetail"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope" v-if="scope.row.a_user">
                  <el-tag
                    v-if="scope.row.a_user === '柳浩'"
                    :type="scope.row.a_user === '柳浩' ? 'success' : 'success'"
                    disable-transitions>{{scope.row.a_user}}
                  </el-tag>
                  <el-tag
                    v-else-if="scope.row.a_user === '何策'"
                    :type="scope.row.a_user === '何策' ? 'primary' : 'success'"
                    disable-transitions>{{scope.row.a_user}}
                  </el-tag>
                  <el-tag
                    v-else-if="scope.row.a_user === '韩悦'"
                    :type="scope.row.a_user === '韩悦' ? 'warning' : 'success'"
                    disable-transitions>{{scope.row.a_user}}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- End Main Container -->

      <!-- Footer -->
      <div id="mws-footer">
        By — 危险的城里人
      </div>
      <!-- End Footer -->

    </div>
    <!-- End Container Wrapper -->
  </div>
</template>

<script>
  export default {
    name: 'checkList',
    data() {
      return {
        baseUrl: 'http://47.95.200.225:80',
        // baseUrl: 'http://192.168.0.147:8000',
        user: [],
        qList: [],
        qcList: [],
        dataList: [],
        timer:[],
        timerList:[],
        levelDetail: [{text:'可推迟',value:'可推迟'}, {text:'优先修复',value:'优先修复'}, {text:'紧急修复',value:'紧急修复'}, {text:'立刻修复',value:'立刻修复'}],
        statusDetail: [{text:'未修复',value:'未修复'}, {text:'修复中',value:'修复中'}, {text:'测试中',value:'测试中'}, {text:'修复完毕',value:'修复完毕'}, {text: '无法修复', value: '无法修复'}],
        checkDetail: [{text:'未测试',value:'未测试'}, {text:'通过',value:'通过'}, {text:'未通过',value:'未通过'}],
        userDetail: [{ text: '柳浩', value: '柳浩' }, { text: '何策', value: '何策' }, { text: '韩悦', value: '韩悦' }],
      }
    },
    methods: {
      getQClassList() {
        let self = this
        this.$ajax
          .get(self.baseUrl + '/qcList/')
          .then(function (res) {
            self.qcList = res.data
            self.qcList.forEach((item, i) => {
              self.dataList[i] = []
            })
          })
          .catch(function (response) {
            // console.log(response)
          })
      },
      getQList() {
        let self = this
        this.$ajax
          .get(self.baseUrl + '/qaList/')
          .then(function (res) {
            self.qList = res.data
            self.qList.forEach((l, i) => {
              // console.log(self.timerList.indexOf(l.q_timer.substring(0, 10)))
              if (self.timer.indexOf(l.q_timer.substring(0, 10)) === -1) {
                let obj = {}
                obj.text = l.q_timer.substring(0, 10)
                obj.value = l.q_timer.substring(0, 10)
                self.timer.push(l.q_timer.substring(0, 10))
                self.timerList.push(obj)
              }
            })
            self.getDataList()
          })
          .catch(function (response) {
            // console.log(response)
          })
      },
      getDataList() {
        let self = this
        self.qList.forEach((item, index) => {
          self.qcList.forEach((n, i) => {
            if (item.q_class.q_class === n.q_class) {
              item.q_timer = item.q_timer.substring(0, 10)
              item.q_level = self.levelDetail[item.q_level].value
              item.q_status = self.statusDetail[item.q_status].value
              item.q_checkOut = self.checkDetail[item.q_checkOut].value
              self.dataList[i].push(item)
            }
          })
        })
      },
      formatter(row, column) {
        return row.q_level
      },
      checkHandler(row, column) {
        return row.q_check
      },
      filterTag(value, row) {
        return row.a_user === value
      },
      filterHandler(value, row, column) {
        const property = column['property']
        return row[property] === value
      }
    },
    mounted() {
      let self = this
      let login = sessionStorage.getItem('userDetail')
      if (login) {
        this.user = JSON.parse(login)
      } else {
        self.$router.push({path: '/login'})
      }
      self.getQClassList()
      self.getQList()
    },
  }
</script>

<style scoped>

</style>
